/*
 * @Description: 车辆详情
 * @Author: ziwei.ma
 * @Date: 2019-07-22 18:00:03
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-09-02 18:54:19
 */

<template>
  <div id="App">
    <!-- <text-content :busID="busID"></text-content> -->
    <div
      class="text-content-warpper flex-v"
      v-show="showType===1"
    >
      <div
        class="img-wrapper"
        v-for="(option,index) in picList"
        :key="index"
      >
        <img :src="option">
      </div>
      <span class="fontsize32">{{busName}}：{{availableSeat}}座</span>
    </div>
    <net-error
      v-show="showType===0"
      @click.native="afreshData"
    ></net-error>
  </div>
</template>

<script>
import { getUrlParamByKey } from 'vue-xiaobu-utils'
import { getBusDetail } from './api/api'
import NetErrorVue from '../../components/NetError'
const SHOW_DATA = 1
const NET_ERROR = 0
export default {
  components: {
    'net-error': NetErrorVue
  },
  data() {
    return {
      busID: '',
      busName: '',
      picList: [],
      availableSeat: '',
      showType: 1
    }
  },
  mounted() {
    this.getBusDetailData()
  },
  methods: {
    getBusDetailData() {
      this.busID = getUrlParamByKey('busID')
      getBusDetail(this.busID).then(res => {
        this.busName = res.busName
        this.picList = res.picList
        this.availableSeat = res.availableSeat
        this.$UI.then(UI => {
          UI.setTitle(this.busName, () => { }, () => { })
        })
        this.showType = SHOW_DATA
      }).catch(err => {
        console.dir(err)
        if (err.error.code === 'ECONNABORTED') {
          this.showType = NET_ERROR
        }
      })
    },
    afreshData() {
      this.getBusDetailData()
    }
  }
}
</script>

<style>
html {
  height: 100%;
}
#App {
  width: 100%;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
}
.text-content-warpper {
  width: 100%;
  height: 100%;
}
/* .text-content-warpper > img {
  width: 686px;
  height: 320px;
  margin-bottom: 32px;
} */
.img-wrapper {
  width: 686px;
  height: 320px;
  margin-bottom: 32px;
}
.img-wrapper > img {
  width: 100%;
  height: 100%;
}
.text-content-warpper > span {
  margin-bottom: 32px;
}
</style>
